<template>
  <div class="task-detail">
    <div class="task-belong" @click="clickBelong" :style="{ 'color': taskInfo.taskDatatype === '3' ? '#409EFF' : '#8F939E'}"><span class="arrow-status" :class="getArrowType(taskInfo)"></span><span class="task-status">{{getWord(taskInfo)}}</span>{{taskInfo.taskBelongName}}</div>
    <div class="task-header">
      <div class="task-title">
        <div class="task-name">
          <img @click="showCover" :src="taskInfo.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+taskInfo.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-1.png'" alt="">
          <textarea :readonly="cantEdit" v-model="taskInfo.taskName" placeholder="请输入任务名称"></textarea>
        </div>
      </div>
      <div class="task-tab">
        <div :class="{'active': currentContentType === 1}" @click="changeType(1)">基本信息</div>
        <div :class="{'active': currentContentType === 2}" @click="changeType(2)">任务动态</div>
        <div :class="{'active': currentContentType === 3}" @click="changeType(3)" v-if="taskInfo.taskDatatype === '2'">子任务</div>
      </div>
    </div>
    <div class="task-infototal" style="height:calc(100vh - 190px); overflow-y: auto;background:white;" v-if="currentContentType === 1">
      <div class="addtaskpage-wrapper">
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-coin"></i>所属{{taskInfo.taskDatatype === '2' ? '项目' : '任务'}}
          </div>
          <div class="form-input" @click="openModuleDialog">
            <span style="color: #C0C4CC;">{{taskInfo.taskBelongName? taskInfo.taskBelongName: '选择所属项目'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>负责人
          </div>
          <div class="form-input" @click="selectDingUsers('principal')">
            <span :style="{'color': dingUserList.principal.name.length > 0? 'black': '#C0C4CC'}">{{dingUserList.principal.name.length > 0? dingUserList.principal.name.join(','): '选择负责人'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>确认人
          </div>
          <div class="form-input" @click="selectDingUsers('confirm')">
            <span :style="{'color': dingUserList.confirm.name.length > 0? 'black': '#C0C4CC'}">{{dingUserList.confirm.name.length > 0? dingUserList.confirm.name.join(','): '选择确认人'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-date"></i>时间
          </div>
          <div class="form-input">
            <span :style="{'color': taskInfo.taskStartTime? 'black': '#C0C4CC'}" @click="selectDate('taskStartTime')">{{taskInfo.taskStartTime? taskInfo.taskStartTime: '选择开始时间'}}</span><span style="color: black;margin: 0 10px;">-</span><span :style="{'color': taskInfo.taskEndTime? 'black': '#C0C4CC'}" @click="selectDate('taskEndTime')">{{taskInfo.taskEndTime? taskInfo.taskEndTime: '选择截止时间'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-time"></i>工期
          </div>
          <div class="form-input">
            <span :style="{'color': planTime? 'black': '#C0C4CC'}">
              {{planTime}}天     
            </span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-data-line"></i>任务绩效
          </div>
          <div class="form-input">
            <input type="text" :readonly="cantEdit" v-model="taskInfo.taskPerformanceAppraisal">
          </div>
        </div>
        <div class="form-item-wrapper" style="min-height:50px;height: auto;">
          <div class="form-label" style="width: 37px;">
            <i class="el-icon-edit-outline"></i>
          </div>
          <div class="form-input" @click="openInfoDialog" style="width: calc(100% - 37px)"> 
            <span v-if="!taskInfo.taskInfo && taskInfo.taskAttachment.length === 0">添加描述和附件</span>
            <div v-if="taskInfo.taskInfo || taskInfo.taskAttachment.length > 0" style="line-height: 32px;padding:8px;">
              <span style="color: black;word-break:break-all;">{{taskInfo.taskInfo}}</span>
              <div class="fileitem" v-for="(file, idx) in taskInfo.taskAttachment" :key="idx">
                <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                <span @click.stop="downloadFile(file.url, file.name)" style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-star-off"></i>关注人
          </div>
          <div class="form-input" @click="selectDingUsers('cc', 300)" style="overflow: hidden;">
            <span style="display: inline-block;width: 100%;overflow: hidden;white-space: nowrap;" :style="{'color': dingUserList.cc.name.length > 0? 'black': '#C0C4CC'}">{{dingUserList.cc.name.length > 0? dingUserList.cc.name.join(','): '选择关注人'}}</span>
          </div>
        </div>
        <div class="action-bar" v-if="showUpdateBtn && !cantEdit">
          <div @click="getTaskInfo(taskInfo.id)">取消</div>
          <div @click="projectOrTaskUpdate">保存</div>
        </div>
        <div class="select-page" v-if="showModule">
          <div class="mask" @click="showModule = false;"></div>
          <div class="module-panel">
            <div class="title">项目列表</div>
            <div class="module-wrapper">
              <div v-for="moduleItem in projectList" :key="moduleItem.id" class="module-item">
                <el-radio v-model="taskInfo.taskBelongId" :label="moduleItem.id">{{moduleItem.taskName}}</el-radio>
              </div>
            </div>
            <div class="bottom-btn">
              <div @click="showModule = false;">取消</div>
              <div @click="selectProject">确定</div>
            </div>
          </div>
        </div>
        <div class="change-page" v-if="showChange">
          <div class="mask" @click="showChange = false;"></div>
          <div class="module-panel">
            <div class="title">请选择要转入的{{taskInfo.taskDatatype === '3'? '任务': '项目'}}</div>
            <div class="module-wrapper">
              <div ref="labelSelected" v-for="moduleItem in moveToList" :key="moduleItem.id" class="module-item">
                <el-radio v-model="moveTo.id" :label="moduleItem.id">{{moduleItem.taskName}}</el-radio>
              </div>
            </div>
            <div class="bottom-btn">
              <div @click="showChange = false;">取消</div>
              <div @click="moveProjectOrTask">确定</div>
            </div>
          </div>
        </div>
        <div class="info-page" v-if="showInfo">
          <div class="task-info">
            <div class="mobile-input-wp">
              <el-input style="width: 100%;" autofocus="true" placeholder="请输入任务描述" @input="detectInput" rows="8" v-model="taskInfo.taskInfo" type="textarea"></el-input>
            </div>
          </div>
          <div class="upload-file">
            <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, taskInfo.taskAttachment)" multiple>
            <div class="upload-btn" @click="$refs.uploadInput.click()">添加附件</div>
            <div class="fileitem" v-for="(file, idx) in taskInfo.taskAttachment" :key="idx">
              <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
              <span @click="downloadFile(file.url, file.name)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
              <span class="uploadtip" v-if="file.url" @click="delFile(idx, taskInfo.taskAttachment)"><i class="el-icon-delete"></i></span>
              <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
            </div>
          </div>
          <div class="bottom-btn">
            <div @click="showInfo = false;">取消</div>
            <div @click="showInfo = false;">确定</div>
          </div>
        </div>
        <el-dialog title="选择图片" :visible.sync="coverDialog"  width="80%" :append-to-body="true">
          <div class="cover-wrapper">
            <div v-for="cover in 15" :key="cover">
              <img @click="selectCover('icon%20blue-' + cover + '.png')" :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-' + cover + '.png'" style="width: 40px; height: 40px;display:block;border-radius: 3px;">
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="add-btn" @click="showActions = true;"><i class="el-icon-menu"></i></div>
    </div>
    <div class="trends-list" style="height:calc(100vh - 220px); overflow-y: auto;padding-top: 30px;" v-if="currentContentType === 2" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false" infinite-scroll-distance="300">
      <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
        <div class="project-wrapper">
          <div class="project">
            <div class="project-trend-wrapper">
              <div class="project-trend" v-for="value in trendDataCollect[dateSection]" :key="value.id">
                <div class="time"><span style="color: black;font-size: 13px;">{{value.dynamicCreateTime.substr(11, 5)}}</span><br><span style="font-size: 12px;">{{value.dynamicCreateTime.substr(5, 5).replace('-','/')}}</span></div>
                <div class="avatar"><img :src="value.executorAvatar" alt=""></div>
                <div class="trend-detail">
                  <p class="row-1">{{value.dynamicExecutiveName}} <span>{{value.dynamicPerformOperation}}</span></p>
                  <span class="row-2">{{value.dynamicContent}}</span>
                  <div class="fileitem" style="width: 470px;" v-for="(file,index) in value.dynamicAttachment" :key="index">
                    <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                      <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-btn" @click="showReply = true;"><i class="el-icon-chat-dot-square"></i></div>
    </div>
    <div class="child-task" style="height:calc(100vh - 190px); overflow-y: auto;background:white;" v-if="currentContentType === 3">
      <div class="content">
        <div v-for="value in subTaskList" :key="value.id" :value="value">
          <div class="task-item" @click="clickChildren(value.id)">
            <span class="arrow-status" :class="getArrowType(value)"></span>
            <span class="task-status">{{getWord(value)}}</span>
            <div class="top">
              <div class="logo">
                <img :src="value.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+value.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-1.png'"  style="width: 48px; height: 48px;border-radius: 5px;">
              </div>
              <div class="task-info">
                <p class="taskName">{{value.taskName}}</p>
                <p class="project"><span>{{value.taskBelongName}}</span></p>
              </div>
            </div>
            <div class="bottom">
              <p><i class="el-icon-user"></i><span>{{value.taskPrincipalName}}</span><span v-if="value.taskRealEndtime">{{value.taskRealEndtime}}</span><span v-if="analyzeData(value)" :style="{'color': analyzeData(value).indexOf('提前')>= 0 ? '#21D779': '#FF5050'}">（{{analyzeData(value)}}）</span></p>
            </div>
          </div>
        </div>
        <img v-if="subTaskList.length === 0" style="width:120px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
      </div>
      <div class="add-btn" @click="addTask" v-if="canAddSubTask"><i class="el-icon-plus"></i></div>
    </div>
    <div class="actions" v-if="showActions">
      <div class="mask" @click="showActions = false;"></div>
      <div class="actions-content">
        <div v-if="taskInfo.taskStatus !== '3' && taskInfo.taskStatus !== '9'" @click="openMore"><i class="el-icon-more"></i>更多操作</div>
        <div @click="openReply"><i class="el-icon-chat-dot-square"></i>参与讨论</div>
        <div v-if="taskInfo.taskStatus !== '3' && taskInfo.taskStatus !== '9' && taskInfo.taskIsMilestone === '1'" @click="setMilestone(0)"><i style="color: red;" class="el-icon-s-flag"></i>取消里程碑</div>
        <div v-if="taskInfo.taskStatus !== '3' && taskInfo.taskStatus !== '9' && (taskInfo.taskIsMilestone === '0' || !taskInfo.taskIsMilestone)" @click="setMilestone(1)"><i class="el-icon-s-flag"></i>设置里程碑</div>
        <div v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskPrincipalId === userInfo.dingId" @click="backStatus(1)"><i class="el-icon-collection-tag"></i>取消标记</div>
        <div v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskConfirmId === userInfo.dingId" @click="backStatus(2)"><i class="el-icon-collection-tag"></i>驳回</div>
        <div type="primary" v-if="taskInfo.taskStatus === '1' && taskInfo.taskPrincipalId === userInfo.dingId" @click="openUpdateTaskStatusDialog(2)"><i class="el-icon-collection-tag"></i>标记完成</div>
        <div type="primary" v-if="taskInfo.taskStatus === '2' && taskInfo.taskConfirmId === userInfo.dingId" @click="openUpdateTaskStatusDialog(3)"><i class="el-icon-collection-tag"></i>确认完成</div>
        <div type="primary" v-if="taskInfo.taskStatus === '1' && taskInfo.taskDatatype !== '1' && taskInfo.taskConfirmId === userInfo.dingId" @click="noticeTask()"><i class="el-icon-collection-tag"></i>催办</div>
        <div type="primary" v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskPrincipalId === userInfo.dingId" @click="noticeTask()"><i class="el-icon-collection-tag"></i>催办</div>
        <div type="primary" v-if="canRebootTask" @click="rebootTask()"><i class="el-icon-collection-tag"></i>重启任务</div>
      </div>
    </div>
    <div class="reply-page" v-if="showReply">
      <div class="task-info">
        <div class="mobile-input-wp">
          <el-input style="width: 100%;" autofocus="true" placeholder="请输入评论内容" @input="detectInput2" rows="8" v-model="dynamic.dynamicContent" type="textarea"></el-input>
        </div>
      </div>
      <div class="upload-file">
        <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile($event, dynamic.dynamicAttachment)" multiple>
        <div class="upload-btn" @click="$refs.uploadInput2.click()">添加附件</div>
        <div class="fileitem" v-for="(file, idx) in dynamic.dynamicAttachment" :key="idx">
          <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
          <span @click="downloadFile(file.url, file.name)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
          <span class="uploadtip" v-if="file.url" @click="delFile(idx, dynamic.dynamicAttachment)"><i class="el-icon-delete"></i></span>
          <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click="showReply = false;">关闭</div>
        <div @click="submitDynamic">确定</div>
      </div>
    </div>
    <div class="reply-page" v-if="showUpdatestatusDialog">
      <div class="task-info">
        <div class="mobile-input-wp">
          <el-input style="width: 100%;" autofocus="true" placeholder="请输入内容" @input="detectInput3" rows="8" v-model="taskExplanation" type="textarea"></el-input>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click="showUpdatestatusDialog = false;">关闭</div>
        <div @click="updateTaskStatus">确定</div>
      </div>
    </div>
    <div class="reply-page" v-if="showStopDialog">
      <div class="task-info">
        <div class="mobile-input-wp">
          <el-input style="width: 100%;" autofocus="true" placeholder="请输入终止任务说明" @input="detectInput3" rows="8" v-model="taskExplanation" type="textarea"></el-input>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click="showStopDialog = false;">关闭</div>
        <div @click="stopTask">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import * as dd from 'dingtalk-jsapi'
import {dateUtil} from '@/utils/dateUtil'
import AtTa from 'vue-at/dist/vue-at-textarea'

export default {
  data() {
    return {
      showReply: false,
      showActions: false,
      headers: {
        token: this.$cookie.get("token")
      },
      planTime: 0,
      subTaskList: [],
      taskDatatype: '任务',
      dingUserList: {
        principal: { id: [], img: [], name: [] },
        confirm: { id: [], img: [], name: [] },
        cc: { id: [], img: [], name: [] }
      },
      taskInfoInit: {},
      unCompleteTaskList: [],
      taskInfo: {
        id: 0,
        taskBelongName: "",
        taskName: "",
        taskPrincipalId: "",
        principalAvatar: "",
        taskPrincipalName: "",
        taskConfirmId: "",
        confirmAvatar: "",
        taskConfirmName: "",
        taskCcId: "",
        ccAvatar: "",
        taskCcName: "",
        taskRange: 0,
        taskPerformanceAppraisal: 0,
        taskInfo: "",
        taskStartTime: "",
        taskEndTime: "",
        taskDatatype: 0,
        taskIsMilestone: 0,
        taskAttachment: [],
      },
      moveTo: {
        id: '',
        taskName: '',
      },
      moveToList: [],
      dateCollect: [],
      trendDataCollect: {},
      dynamic: {
        dynamicTaskId: 0,
        dynamicTaskName: '',
        dynamicExecutiveId: '',
        dynamicExecutiveName: '',
        dynamicContent: '',
        dynamicAscription: 0,
        dynamicAttachment: [],
      },
      taskFileList: [],
      isFirstLoading: true,
      loading: false,
      totalPage: 1,
      page: 0,
      completeTask: 0,
      isLoadingData: true,
      showInfo: false,
      showModule: false,
      coverDialog: false,
      projectList: [],
      currentContentType: 1,
      showChange: false,
      taskExplanation: '',
      showStopDialog:false,
      canRebootThisTask: false,
      hasUnCompleteTask: false,
      showUpdatestatusDialog: false
    };
  },
  components:{
    AtTa
  },
  mixins: [dingMixin],
  async mounted() {
    let id = this.$route.params.id || window.STORAGE_TASKID;
    window.STORAGE_TASKID = null;
    await this.getTaskInfo(id)
    this.projectList = await this.$httpN.postB("division/task/getVisibleProjectList", {taskStatus: '1'});
    // if(!this.$route.params.id) {
    //   this.currentContentType = 3;
    //   this.subTaskList = await this.$httpN.postB("division/task/getSubTaskList",{ id: this.taskInfo.id });
    // }
  },
  methods: {
    detectInput() {
      if(this.taskInfo.taskInfo.charAt(this.taskInfo.taskInfo.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.taskInfo.taskInfo += data[0].name + ' '
        })
      }
    },
    detectInput2() {
      if(this.dynamic.dynamicContent.charAt(this.dynamic.dynamicContent.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.dynamic.dynamicContent += data[0].name + ' '
        })
      }
    },
    detectInput3() {
      if(this.taskExplanation.charAt(this.taskExplanation.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.taskExplanation += data[0].name + ' '
        })
      }
    },
    showCover() {
      if(!this.cantEdit) this.coverDialog = true;
    },
    openModuleDialog() {
      // if(!this.cantEdit) this.showModule = true;
    },
    openInfoDialog() {
      if(!this.cantEdit) this.showInfo = true;
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) {
         return this.dingPreviewPic(url);
      }else{
        this.mobileAlert('手机不支持下载文件，请到电脑端下载');
      }
    },
    openMore() {
      this.mobileSelect('更多操作',['移动任务','删除任务', '复制任务', '终止任务'], ({buttonIndex}) =>{
        if(buttonIndex === 0) {
          this.showActions = false;
          if(this.cantEdit) {
            return this.mobileAlert('你无法移动任务')
          }
          this.openMoveDialog();
        }else if(buttonIndex === 1) {
          this.showActions = false;
          if(!this.canDelTask) {
            return this.mobileAlert('你无法删除任务');
          }
          this.projectOrTaskDelete(this.taskInfo.id);
        }else if(buttonIndex === 2) {
          this.showActions = false;
          if(this.taskInfo.taskDatatype === '2') {
            let projectInfo = this.$httpN.postB('division/task/projectInfo', {id: this.taskInfo.taskBelongId})
            if(! (projectInfo.hasTaskCreateAuthority === '1' && projectInfo.taskStatus === '1' && projectInfo.taskDeleteStatus === '0') ) return this.mobileAlert('你无法复制任务');
          }
          this.copyTask();
        }else if(buttonIndex === 3) {
          this.showActions = false;
          if(!this.canDelTask) {
            return this.mobileAlert('你无法终止任务')
          }
          this.openStopDialog()
        }
      })
    },
    async copyTask() {
      let newTask = formUtil.deepCopy(this.taskInfo);
      newTask.id = '';
      newTask.taskManageId = this.userInfo.dingId;
      newTask.taskManageName = this.userInfo.realName;
      if (!newTask.taskStatus) newTask.taskStatus = 1;

      window.STORAGE_TASKID = this.taskInfo.id;
      this.$router.push({ name: 'mlivolobim-addTask', params: {copyTask: true, data: newTask}})
    },
    openReply() {
      this.showReply = true;
      this.showActions = false;
    },
    addTask() {
      window.STORAGE_TASKID = this.taskInfo.id;
      this.$router.push({ name: 'mlivolobim-addTask', params: {id: this.taskInfo.id, taskName: this.taskInfo.taskName, projectName: this.taskInfo.taskBelongName}})
    },
    async changeType(type){
      this.currentContentType = type;
      if(type === 2) {
        this.getDynamicList(true)
      }else if(type === 3){
        this.subTaskList = await this.$httpN.postB("division/task/getSubTaskList",{ id: this.taskInfo.id });
        this.completeTask = 0;
        this.subTaskList.forEach((item) => {
          if(item.taskStatus === '3') this.completeTask++;
        })
      }
    },
    selectProject() {
      this.showModule = false;
      this.projectList.forEach(item => {
        if (item.id === this.taskInfo.taskBelongId) {
          this.taskInfo.taskBelongName = item.taskName;
        }
      });
    },
    selectDate(type) {
      if(this.cantEdit) return;
      this.mobileSelectDate(this.currentDate, (date) => {
        this.taskInfo[type] = date;
        if(this.taskInfo.taskStartTime && this.taskInfo.taskEndTime && (new Date(this.taskInfo.taskStartTime) - new Date(this.taskInfo.taskEndTime) > 0) ) {
          this.taskInfo[type] = ''
          return this.mobileAlert('截止日期不可小于开始日期')
        }
        this.changePlanTime();
      });
    },
    analyzeData(item) {
      if(item.taskStatus === '1') {
        if(new Date(dateUtil.thisDay()) < new Date(item.taskStartTime).getTime()){
          return ''
        }else {
          if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
            return `逾期${time}天`
          }else {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
            return `剩余${time}天`
          }
        }
      }else if(item.taskStatus === '9') {
        return ''
      }else if(item.taskStatus === '2') {
        if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
          return `逾期${time}天`
        }else {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
          return `剩余${time}天`
        }
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `逾期${time}天`
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return ''
        }else{
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `提前${time}天`
        }
      }
    },
    daysDiff(oDate1,oDate2){
      let  aDate, iDays;
      oDate1 = new Date(oDate1);
      oDate2 = new Date(oDate2);
      iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24);
      return Math.abs(iDays)
    },
    changePlanTime(e) {
      let startTime = new Date(this.taskInfo.taskStartTime);
      let endTime = new Date(this.taskInfo.taskEndTime);
      this.planTime = parseInt((endTime - startTime) / 1000 / 60 / 60 / 24) + 1;
    },
    async noticeTask() {
      if (!await this.$httpN.postB("division/task/urge", { id: this.taskInfo.id}) ) return;
      this.mobileMessage('催办成功');
    },
    async backStatus(rejectType) {
      if (!await this.$httpN.postB("division/task/withdrawTask", { id: this.taskInfo.id, rejectType}) ) return;
      this.mobileMessage(rejectType === 1 ? '撤回标记成功': '驳回成功');
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    getWord(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? '进行中': '未开始'
      }else if(item.taskStatus === '9') {
        return '已终止'
      }else if(item.taskStatus === '2') {
        return '待确认'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return '逾期完成'
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          return '按时完成'
        }else{
          return '提前完成'
        }
      }
    },
    getArrowType(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? 'arrow-4': 'arrow-2'
      }else if(item.taskStatus === '9') {
        return 'arrow-3'
      }else if(item.taskStatus === '2') {
        return 'arrow-6'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return 'arrow-5'
        } else{
          return 'arrow-1'
        }
      }
    },
    clickBelong() {
      if(this.taskInfo.taskDatatype === '3') {
        this.getTaskInfo(this.taskInfo.taskBelongId);
        this.changeType(1);
      }else if(this.taskInfo.taskDatatype === '2') {
        // window.STORAGE_TASKID = this.taskInfo.id;
        // this.$router.push({ name: 'mlivolobim-projectDetail', params: {projectId: this.taskInfo.taskBelongId}})
      }
    },
    clickChildren(id) {
      this.getTaskInfo(id);
      this.changeType(1);
    },
    async getTaskInfo(id) {
      this.isLoadingData = true;
      let result = await this.$httpN.postB('division/task/taskInfo', { id: id });  // 判断是任务还是项目
      if(result.taskAttachment) result.taskAttachment = JSON.parse(result.taskAttachment);

      this.taskInfo = result
      //上级任务或者项目状态是否为进行中
      let taskBelongData = await this.$httpN.postB(this.taskInfo.taskDatatype === '2'? 'division/task/projectInfo' : 'division/task/taskInfo', {id: this.taskInfo.taskBelongId});
      if(taskBelongData.taskStatus === '1') this.canRebootThisTask = true;
      //下级是否还有子任务未完成
      let unCompleteTaskList = await this.$httpN.postB('division/task/getUnCompleteTask', {id: this.taskInfo.id});
      unCompleteTaskList.length > 0 ? this.hasUnCompleteTask = true :this.hasUnCompleteTask = false
      if (this.taskInfo.taskStartTime !== "") this.planTime = parseInt((new Date(this.taskInfo.taskEndTime) - new Date(this.taskInfo.taskStartTime)) / 1000 / 60 / 60 / 24) + 1;
      if (this.taskInfo.taskPrincipalId !== "") {
        this.dingUserList.principal.id = this.taskInfo.taskPrincipalId.split(",");
        this.dingUserList.principal.img = this.taskInfo.principalAvatar.split(",");
        this.dingUserList.principal.name = this.taskInfo.taskPrincipalName.split(",");
      }
      if (this.taskInfo.taskConfirmId !== "") {
        this.dingUserList.confirm.id = this.taskInfo.taskConfirmId.split(",");
        this.dingUserList.confirm.img = this.taskInfo.confirmAvatar.split(",");
        this.dingUserList.confirm.name = this.taskInfo.taskConfirmName.split(",");
      }
      if (this.taskInfo.taskCcId !== "") {
        this.dingUserList.cc.id = this.taskInfo.taskCcId.split(",");
        this.dingUserList.cc.img = this.taskInfo.ccAvatar.split(",");
        this.dingUserList.cc.name = this.taskInfo.taskCcName.split(",");
      }
      this.taskInfoInit = JSON.stringify(this.taskInfo);
      this.isLoadingData = false;
    },
    selectDingUsers(showName, num = 1) {
      if(!this.cantEdit) {
        this.complexPicker(num, [], this.dingUserList[showName].id).then(
          async (data) => {
            this.dingUserList[showName].id = data.map(item => item.emplId);
            this.dingUserList[showName].img = data.map(item => item.avatar);
            this.dingUserList[showName].name = data.map(item => item.name);
            if(showName === 'principal') {
              this.taskInfo.principalAvatar = this.dingUserList[showName].img.join(',');
              this.taskInfo.taskPrincipalId = this.dingUserList[showName].id.join(',');
              this.taskInfo.taskPrincipalName = this.dingUserList[showName].name.join(',')
            }else if(showName === 'confirm') {
              this.taskInfo.confirmAvatar = this.dingUserList[showName].img.join(',');
              this.taskInfo.taskConfirmId = this.dingUserList[showName].id.join(',');
              this.taskInfo.taskConfirmName = this.dingUserList[showName].name.join(',')
            } else if(showName === 'cc') {
              this.taskInfo.ccAvatar = this.dingUserList[showName].img.join(',');
              this.taskInfo.taskCcId = this.dingUserList[showName].id.join(',');
              this.taskInfo.taskCcName = this.dingUserList[showName].name.join(',')
            }
          }
        );
      }
    },
    //编辑并保存任务
    async projectOrTaskUpdate() {
      if(!this.taskInfo.taskName) return this.mobileAlert('请输入'+this.taskDatatype+'名称')
      if(!this.taskInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(!this.taskInfo.taskConfirmId) return this.mobileAlert('请选择'+this.taskDatatype+'确认人')
      if(!this.taskInfo.taskStartTime) return this.mobileAlert('请选择'+this.taskDatatype+'开始时间')
      if(!this.taskInfo.taskEndTime) return this.mobileAlert('请选择'+this.taskDatatype+'结束时间')
      if(!this.taskInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(!this.taskInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(isNaN(this.taskInfo.taskPerformanceAppraisal)) return this.mobileAlert(this.taskDatatype+'绩效为数字')
      if(this.taskInfo.taskPerformanceAppraisal < 0) return this.mobileAlert('任务绩效大于0')
      if(this.taskInfo.taskAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');

      if(this.taskInfo.id) this.taskInfo.taskCreateTime = '';
      if (! await this.$httpN.postB("division/task/projectOrTaskUpdate",this.taskInfo)) return;
      this.mobileMessage('保存成功');
      this.getTaskInfo(this.taskInfo.id);
    },
    //设置里程碑
    async setMilestone(taskIsMilestone) {
      if(! await this.$httpN.postB('division/task/setMilestone', {id: this.taskInfo.id,taskIsMilestone: taskIsMilestone})) return
      if (taskIsMilestone === 1) {
        this.mobileMessage('设置里程碑成功');
      } else {
        this.mobileMessage('取消设置里程碑成功');
      }
      this.showActions = false;
      this.getTaskInfo(this.taskInfo.id);
    },
    async openMoveDialog() {
      this.showChange = true;
      this.moveTo = {
        id: this.taskInfo.taskBelongId,
        taskName: this.taskInfo.taskBelongName
      };
      if (this.taskInfo.taskDatatype === '2') {
        this.moveToList = await this.$httpN.postB("division/task/getVisibleProjectList", {taskStatus: '1'});
      } else {
        let {list} = await this.$httpN.postB('division/task/allTaskList', {sectionType: 1, searchType: 1, limit: 999})
        this.moveToList = list.filter(item => {
          return item.taskDatatype === '2' && item.taskStatus === '1' && item.taskDeleteStatus === '0'
        })
      }
    },
    //关注任务
    attentionTask() {
      this.complexPicker(300, [], this.dingUserList['cc'].id).then(
        async (data) => {
          let postData = formUtil.deepCopy(this.taskInfo);
          postData.taskCcId = data.map(item => item.emplId).join(",");
          postData.taskCcName = data.map(item => item.name).join(",");
          if (! await this.$httpN.postB("division/task/projectOrTaskUpdate", postData)) return;
          this.mobileMessage('修改成功');
          this.getTaskInfo(this.taskInfo.id);
        }
      )
    },
    //移动任务
    async moveProjectOrTask() {
      this.moveToList.forEach(item => {
        if (item.id === this.moveTo.id) {
          this.moveTo.taskName = item.taskName;
        }
      });
      if(! await this.$httpN.postB('division/task/moveProjectOrTask', {
        id: this.taskInfo.id,
        taskBelongId: this.moveTo.id,
        taskBelongName: this.moveTo.taskName
      })) return 

      this.showChange = false;
      this.mobileMessage('任务已移动');
      this.getTaskInfo(this.taskInfo.id);
    },
    //删除任务
    async projectOrTaskDelete(id) {
      if(this.hasUnCompleteTask) return this.mobileMessage('其下有任务未完成');
      this.mobileConfirm('您确定要删除任务吗', async ()=> {
        if(! await this.$httpN.postB("division/task/projectOrTaskDelete", { id: id })) return 
        this.mobileMessage('删除成功');
        window.NEEDREFRESH = true;
        this.$router.go(-1)
      },() => {
        this.showActions = false;
      })
    },
    async rebootTask() {
      if (!await this.$httpN.postB("division/task/rebootTask", { id: this.taskInfo.id}) ) return;
      this.mobileMessage('任务重启成功');
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    openStopDialog() {
      if(this.hasUnCompleteTask) return this.mobileMessage('其下有任务未完成');
      this.showActions = false;
      this.mobileConfirm('您确定要终止任务吗', async ()=> {
        this.taskExplanation = '';
        this.showStopDialog = true;
      })
    },
    async stopTask() {
      if (!await this.$httpN.postB("division/task/updateTaskStatus", { id: this.taskInfo.id, taskStatus: 9, taskExplanation: this.taskExplanation}) ) return;
      this.mobileMessage('终止任务成功');
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    async openUpdateTaskStatusDialog() {
      if(this.hasUnCompleteTask) {
        this.mobileConfirm('其下有子任务未完成，是否标记完成所有子任务', async ()=> {
          if(!await this.$httpN.postB('division/task/completeSubTask',{id: this.taskInfo.id})) return;
          this.mobileMessage('其下所有子任务已标记完成');
          this.getTaskInfo(this.taskInfo.id);
          window.NEEDREFRESH = true;
        })
      } else {
        this.showUpdatestatusDialog = true;
      }
    },
    //改变任务状态
    async updateTaskStatus() {
      if(!this.taskExplanation && this.taskInfo.taskStatus === '1') return this.mobileAlert('请输入完成任务说明')
      if (!await this.$httpN.postB("division/task/updateTaskStatus", { id: this.taskInfo.id, taskStatus: this.taskInfo.taskStatus === '1' ? '2' : '3', taskExplanation: this.taskExplanation}) ) return;
      this.mobileMessage(this.taskInfo.taskStatus === 1 ? '任务已标记完成': '任务已确认完成');
      this.showUpdatestatusDialog = false;
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    //获取动态列表
    async getDynamicList(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      if (this.taskInfo.taskDatatype === '1') {
        var {list, totalPage} = await this.$httpN.postB("division/dynamic/list", {
          dynamicAscription: this.taskInfo.taskDatatype,
          projectIds: this.taskInfo.id,
          page: this.page,
          limit: 10
        });
      } else {
        var {list, totalPage} = await this.$httpN.postB("division/dynamic/list", {
          dynamicAscription: this.taskInfo.taskDatatype,
          dynamicTaskId: this.taskInfo.id,
          page: this.page,
          limit: 10
        });
      }
      
      this.loading = false;
      this.setDataToCollect(list);
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      list.forEach(item => {
        if(item.dynamicAttachment) {
          item.dynamicAttachment = JSON.parse(item.dynamicAttachment);
        }else{
          item.dynamicAttachment = []
        }
        if(!this.dateCollect.includes(item.dayGroup)) {
          this.dateCollect.push(item.dayGroup);
          this.$set(this.trendDataCollect, item.dayGroup, [])
        }
        this.trendDataCollect[item.dayGroup].push(item);
      })
    },
    async uploadFile(e, target) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.mobileAlert('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.mobileAlert(res.data.msg)
            target.pop();
          }
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    async submitDynamic() {
      if (this.dynamic.dynamicContent === ''&& this.dynamicAttachment.length === 0) {
        this.mobileAlert("请输入评论内容或添加附件后提交");
        return;
      }
      if(this.dynamic.dynamicAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');

      if(! await this.$httpN.postB('division/dynamic/reviewSave', {
        dynamicTaskId: this.taskInfo.id,
        dynamicTaskName: this.taskInfo.taskName,
        dynamicExecutiveId: this.userInfo.dingId,
        dynamicExecutiveName: this.userInfo.realName,
        dynamicContent: this.dynamic.dynamicContent,
        dynamicAscription: this.taskInfo.taskDatatype,
        dynamicAttachment: this.dynamic.dynamicAttachment
      })) return 
      this.mobileMessage('评论成功');
      formUtil.resetData(this.dynamic);
      this.showReply = false;
      this.changeType(2)
    },
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.getDynamicList();
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    selectCover(img) {
      this.coverDialog = false;
      this.taskInfo.taskUrl = img
    },
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    cantEdit() {
      return !( (this.taskInfo.taskStatus === '1' || this.taskInfo.taskStatus === '2') && this.taskInfo.taskDeleteStatus ==='0' && (this.taskInfo.hasTaskModifyAuthority === '1' || this.taskInfo.hasProjectAuthority === '1') )
    },
    cantSetMilestone() {
      return this.taskInfo.taskManageId === this.userInfo.dingId || this.taskInfo.taskPrincipalId === this.userInfo.dingId
    },
    canDelTask() {
      return this.taskInfo.hasTaskDeleteAuthority === '1'
    },
    showUpdateBtn() {
      return (this.taskInfoInit !== JSON.stringify(this.taskInfo)) && this.isLoadingData === false;
    },
    canAddSubTask() {
      return this.taskInfo.taskStatus === '1' && this.taskInfo.taskDeleteStatus ==='0' && this.taskInfo.hasTaskModifyAuthority === '1' && this.taskInfo.taskDatatype === '2'
    },
    canRebootTask() {
      return this.taskInfo.taskStatus === '3' && this.taskInfo.hasTaskModifyAuthority === '1' && this.taskInfo.taskDatatype !== '1' && this.canRebootThisTask
    }
  }
};
</script>

<style lang="scss" scoped>
.task-detail{
  .task-belong{
    line-height: 50px;
    background: #E9EEF4;
    padding-left: 36px;
    color: #8F939E;
    position: relative;
    .arrow-status{
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 25px #4495FF;
      border-left:solid 25px #4495FF ;
      border-bottom:solid 25px transparent;
      border-right:solid 25px transparent;
      &.arrow-1{
        border-top:solid 25px #21D779;
        border-left:solid 25px #21D779 ;
      }
      &.arrow-2{
        border-top:solid 25px #9987FA;
        border-left:solid 25px #9987FA ;
      }
      &.arrow-3{
        border-top:solid 25px #DBDADA;
        border-left:solid 25px #DBDADA ;
      }
      &.arrow-4{
        border-top:solid 25px #4495FF;
        border-left:solid 25px #4495FF ;
      }
      &.arrow-5{
        border-top:solid 25px #B0C7CD;
        border-left:solid 25px #B0C7CD ;
      }
      &.arrow-6{
        border-top:solid 30px #E6A23C;
        border-left:solid 30px #E6A23C ;
      }
    }
    .task-status{
      position: absolute;
      width: 50px;
      line-height: 20px;
      left: -8px;
      top: 8px;
      color: white;
      transform: rotate(-45deg);
      text-align: center;
      font-weight: normal;
      font-size: 0.7rem;
    }
    &::after{
      content: '';
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 10px #E9EEF4;
      border-left:solid 10px #E9EEF4 ;
      border-bottom:solid 10px transparent;
      border-right:solid 10px transparent;
    }
  }
  .task-header{
    height: 145px;
    background: #F9F9F9;
    .task-title{
      padding: 0 16px 0 26px;
      .task-name{
        position: relative;
        height: 80px;
        padding-right: 100px;
        img{
          width: 50px;
          height: 50px;
          border-radius: 3px;
          position: absolute;
          top:15px;
          right:30px;
        }
        textarea{
          font-size: 18px;
          width: 100%;
          height: 60px;
          border: none;
          outline: none;
          resize:none;
          background: transparent;
          margin-top: 16px;
        }
      }
    }
    .task-tab{
      margin-top: 5px;
      padding: 0 25px;
      display: flex;
      text-align: center;
      line-height: 60px;
      justify-content: space-between;
      >div{
        width:30%;
        color: #818A82;
        font-weight: bold;
        position: relative;
      }
      div.active{
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50%;
          height: 3px;
          background: #6FB3F6;
          left: 50%;
          margin-left: -25%;
          border-radius: 2px;
        }
      }
    }
  }
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #C0C4CC;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #C0C4CC;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #C0C4CC;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #C0C4CC;
}
.task-infototal{
  .add-btn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
    z-index: 3;
  }
}
.addtaskpage-wrapper{
  padding: 0 16px 56px;
  background: white;
  .task-name{
    position: relative;
    height: 90px;
    border-bottom: 1px solid #e7e5e5;
    padding-left: 105px;
    padding-top: 5px;
    img{
      width: 70px;
      height: 70px;
      border-radius: 3px;
      position: absolute;
      top:5px;
      left:20px;
    }
    textarea{
      width: 100%;
      height: 80px;
      border: none;
      outline: none;
      resize:none;
    }
  }
  .form-item-wrapper{
    height: 50px;
    border-bottom: 1px solid #e7e5e5;
    line-height: 50px;
    display: flex;
    .form-label{
      width: 110px;
      color: #909399;
      padding-left: 20px;
      i{
        margin-right: 3px;
      }
    }
    .form-input{
      color: #C0C4CC;
      flex: 1;
      input{
        width: 100%;
        height: 90%;
        border: 0;
        outline: none;
      }
    }
    .fileitem{
      line-height: 32px;
      margin-bottom: 5px;
      background: #F5F5F5;
      padding-left:10px;
      font-size: 12px;
      color: #606266;
      .uploadtip{
        float:right;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .action-bar{
    position: fixed;
    line-height: 50px;
    width: 100%;
    bottom: 0;
    left: 0;
    display:flex;
    text-align: center;
    div{
      flex:1;
      font-size: 16px;
    }
    >div:first-child{
      background: #F2F2F2;
      color: #909399;
    }
    >div:last-child{
      color: white;
      background: #639efc;
    }
  }
}
.select-page, .change-page{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  .mask{
    background: rgba(0,0,0,0.5);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
  }
  .module-panel{
    width: 80%;
    position: absolute;
    top:0;
    right: 0;
    height: 100%;
    background: white;
    .title{
      font-weight: bold;
      padding-left: 16px;
      border-bottom: 1px solid #F6F6F6;
      line-height: 46px;
    }
    .module-wrapper{
      height: calc(100vh - 150px);
      overflow: auto;
      padding: 16px 16px;
      .module-item{
        padding-left:15px;
        line-height: 30px;
        border-bottom: 1px solid #F6F6F6;
        margin-bottom: 5px;
      }
    }
    .bottom-btn{
      position: absolute;
      bottom: 0;
      right:0;
      width: 100%;
      display: flex;
      div{
        flex:1;
        text-align: center;
        line-height: 50px;
        background: #F2F2F2;
        color: #8D8F96;
      }
      >div:last-child{
        color:white;
        background: #639EFC;
      }
    }
  }
}
.info-page{
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: white;
  padding: 16px;
  z-index: 10;
  .bottom-btn{
    position: absolute;
    bottom: 0;
    right:0;
    width: 100%;
    display: flex;
    div{
      flex:1;
      text-align: center;
      line-height: 50px;
      background: #F2F2F2;
      color: #8D8F96;
    }
    >div:last-child{
      color:white;
      background: #639EFC;
    }
  }
  .task-info{
    textarea{
      width: 100%;
      height: 250px;
      border: none;
      outline: none;
      resize:none;
      background: #F9F9F9;
      padding: 10px;
    }
  }
  .upload-file{
    margin-top: 30px;
    font-size: 14px;
    color: #409EFF;
    .upload-btn{
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
  .fileitem{
    line-height: 32px;
    margin-bottom: 5px;
    background: #F5F5F5;
    padding-left:10px;
    font-size: 12px;
    color: #606266;
    .uploadtip{
      float:right;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.trends-list {
  background: white;
  .add-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
    z-index: 3;
  }
}
.cover-wrapper{
  display: flex;
  flex-wrap: wrap;
  div{
    height: 40px;
    width: 40px;
    background: #409EFF;
    color: white;
    line-height: 40px;
    text-align: center;
    font-size: 40px;
    position: relative;
    border-radius: 5px;
    margin: 5px;
  }
}
.project-wrapper{
  padding: 0 16px 0;
  background: white;
  border-radius: 3px;
  .project-header{
    width: 100px;
    line-height: 32px;
    border-radius: 100px;
    background: #ECECEC;
    color: #75797E;
    text-align: center;
    margin-left: 25px;
    position: relative;
  }
  .project-trend-wrapper{
    .project-trend{
      display: flex;
      .avatar{
        width: 30px;
        margin-left: 20px;
        margin-right: 15px;
        position: relative;
        img{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          position: absolute;
          z-index: 2;
        }
        &::after{
          content: '';
          height: 100%;
          position: absolute;
          top:0;
          left: 15.5px;
          z-index: 1;
          border-width: 1px;
          border-style: dashed;
          border-color: #ECECEC;
          border-right-width: 0px;
        }
      }
      &:first-child{
        .avatar::before{
          content: '';
          height: 30px;
          position: absolute;
          top:-30px;
          left: 15.5px;
          z-index: 1;
          border-width: 1px;
          border-style: dashed;
          border-color: #ECECEC;
          border-right-width: 0px;
        }
      }
      .time{
        text-align: center;
        color: #B8BFCB;
      }
      .trend-detail{
        padding-top: 5px;
        padding-bottom: 20px;
        width:calc(100% - 110px);
        p{
          margin: 0;
        }
        .row-1{
          font-size: 12px;
          font-weight: bold;
          color: #606266;
          span{
            margin-left: 10px;
            color:#606266;
            font-size:12px;
            font-weight: normal;
          }
        }
        .row-2{
          white-space: pre-line;
          font-size: 12px;
          margin: 10px 0;
          display: inline-block;
          color: #909399;
          cursor: pointer;
          width:100%;
          word-wrap: break-word;
        }
      }
    }
  }
}
.child-task{
  padding-top: 20px;
  background: white;
  .add-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
    z-index: 3;
  }
  .content {
    .task-item{
      width: calc(100% - 40px);
      margin: 0 20px 20px;
      border:1px solid #D3E3E8;
      background-color: #FFF;
      border-radius: 5px;
      box-shadow: 0px 0px 1px rgb(221, 221, 221);
      padding: 30px 45px;
      cursor: pointer;
      position: relative;
      &:hover{
        box-shadow: 0px 0px 4px rgb(221, 221, 221);
      }
      .arrow-status{
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 30px #21D779;
        border-left:solid 30px #21D779 ;
        border-bottom:solid 30px transparent;
        border-right:solid 30px transparent;
        &.arrow-1{
          border-top:solid 30px #21D779;
          border-left:solid 30px #21D779 ;
        }
        &.arrow-2{
          border-top:solid 30px #9987FA;
          border-left:solid 30px #9987FA ;
        }
        &.arrow-3{
          border-top:solid 30px #DBDADA;
          border-left:solid 30px #DBDADA ;
        }
        &.arrow-4{
          border-top:solid 30px #4495FF;
          border-left:solid 30px #4495FF ;
        }
        &.arrow-5{
          border-top:solid 30px #B0C7CD;
          border-left:solid 30px #B0C7CD ;
        }
      }
      .task-status{
        position: absolute;
        width: 60px;
        line-height: 20px;
        left: -6px;
        top: 11px;
        color: white;
        transform: rotate(-45deg);
        text-align: center;
        font-weight: normal;
      }
      &::after{
        content: '';
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 15px white;
        border-left:solid 15px white ;
        border-bottom:solid 15px transparent;
        border-right:solid 15px transparent;
      }
      .top{
        display:flex;
        .logo{
          width: 48px;
          height: 48px;
          text-align: center;
          background: #409EFF;
          text-align: center;
          border-radius: 4px;
        }
        .task-info{
          width: calc(100% - 48px);
          p{
            margin: 0;
            padding-left:10px;
          }
          .taskName{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
          }
          .project{
            margin-top: 15px;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            span{
              background: #FFDCDC;
              color: #FF5050;
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
      .bottom{
        margin-top: 10px;
        p{
          margin: 5px 0 0 0 ;
          color: #79828C;
          span{
            margin-left: 5px;
          }
        }
      }
    }
  }
}
.actions{
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  .mask{
    background: rgba(0,0,0,0.5);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
  }
  .actions-content{
    position: absolute;
    background: white;
    bottom: 20px;
    right: 20px;
    border-radius: 3px;
    div{
      line-height: 44px;
      width: 145px;
      text-align: center;
      border-bottom: 1px solid #F6F6F6;
      color: #606266;
      i{
        font-size: 20px;
        margin-right: 5px;
        color: #909399;
        position: relative;
        top:3px;
      }
    }
    >div:last-child{
      border-bottom: none;
    }
  }
}
.reply-page{
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: white;
  padding: 16px;
  .bottom-btn{
    position: absolute;
    bottom: 0;
    right:0;
    width: 100%;
    display: flex;
    div{
      flex:1;
      text-align: center;
      line-height: 50px;
      background: #F2F2F2;
      color: #8D8F96;
    }
    >div:last-child{
      color:white;
      background: #639EFC;
    }
  }
  .task-info{
    textarea{
      width: 100%;
      height: 250px;
      border: none;
      outline: none;
      resize:none;
      background: #F9F9F9;
      padding: 10px;
    }
  }
  .upload-file{
    margin-top: 30px;
    font-size: 14px;
    color: #409EFF;
    .upload-btn{
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
  .fileitem{
    line-height: 32px;
    margin-bottom: 5px;
    background: #F5F5F5;
    padding-left:10px;
    font-size: 12px;
    color: #606266;
    .uploadtip{
      float:right;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>